<template>
    <div>
        <!-- 作业情况 -->
        <el-form :inline="true" size="small" :model="formInline">
            <el-form-item label="姓名">
                <el-input v-model="formInline.userName" placeholder="请输入" clearable />
            </el-form-item>
            <el-form-item label="电话号码">
                <el-input v-model="formInline.phone" placeholder="请输入" clearable />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">搜索</el-button>
            </el-form-item>
        </el-form>
        <!-- 表格 -->
        <div v-loading="loading">
            <el-collapse>
                <el-collapse-item :name="item.id" v-for="item, index in tableData" :key="item.id">
                    <template #title>
                        <div class="title_item">
                            <span style="margin: 0 20px;">{{ index + 1 }}</span>
                            <span class="title_item_name">{{ item.userName }}</span>
                            <span class="title_item_phone">{{ item.phone }}</span>
                            <div class="title_item_tag">
                                <el-tag type="primary">课</el-tag>
                                <!-- 数值 -->
                                <span style="color: aquamarine;">{{ item.courseNum }}门</span>
                            </div>
                            <div class="title_item_tag">
                                <el-tag type="success">作</el-tag>
                                <!-- 数值 -->
                                <span style="color: aquamarine;">{{ item.releaseNum }}份</span>
                            </div>
                        </div>
                    </template>
                    <div class="determine_item" :class="{ color: index % 2 === 0 }"
                        v-for="item, index in item.courseReleaseInfoDtos" :key="item.options">
                        <span class="determine_item_name">作业名称：</span>
                        <span class="determine_item_num">{{ item.courseName }}</span>
                        <div style="display: flex;align-items: center;">
                            <span class="determine_item_name">完成情况：</span>
                            <el-progress style="flex: 1;" :percentage="item.completion" :color="customColors" />
                        </div>
                    </div>
                </el-collapse-item>
            </el-collapse>
        </div>

        <div class="page">
            <Pagination @getDate="queryDate" :queryNum="queryCount" />
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, watch } from 'vue'
import { ElMessage, ElMessageBox } from "element-plus";

import { getAdminTeacherHomeworkListApi, getAdminStudentHomeworkListApi } from "@/api/index";

import Pagination from "@/components/base/MyPagination.vue";

const props = defineProps(['type'])

const formInline = reactive({
    userName: '',
    phone: '',
})
const customColors = [
    { color: '#f56c6c', percentage: 20 },
    { color: '#e6a23c', percentage: 40 },
    { color: '#5cb87a', percentage: 60 },
    { color: '#1989fa', percentage: 80 },
    { color: '#6f7ad3', percentage: 100 },
]
// 分页用
const queryCount = ref(1);
watch(() => props.type, () => { queryCount.value += 1 })
const onSubmit = () => {
    queryCount.value += 1;
}
const loading = ref(false);

const tableData = ref([
])
// 格式化时间
const formatData = (cellValue) => {
    var s = new Date(cellValue).toLocaleString();
    return s;
};
// 获取数据
const queryDate = async (page) => {
    loading.value = true
    const params = {
        pageNum: page.pageNum,
        pageSize: page.pageSize,
    }
    for (const key in formInline) {
        if (formInline[key] != null && formInline[key] !== "" && key !== "time") {
            params[key] = formInline[key];
        } else if (formInline.time && formInline.time.length !== 0) {
            params.startTime = formInline.time[0];
            params.endTime = formInline.time[1];
        }
    }
    let res = null
    if (props.type == 1) {
        res = await getAdminTeacherHomeworkListApi(params);
    } else {
        res = await getAdminStudentHomeworkListApi(params);
    }
    loading.value = false;
    if (res.code !== "10000") {
        ElMessage({
            showClose: true,
            message: res.message,
            type: "error",
        });
        return;
    }
    ElMessage({
        showClose: true,
        message: `查询成功!`,
        type: "success",
    });
    tableData.value = res.data.list || [];
    console.log(res);
    page.totalCount = res.data.totalCount;
}


</script>

<style lang="scss" scoped>
.title_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;

    span {
        font-size: 14px;
    }

    .title_item_name {
        font-weight: 600;
    }

    .title_item_phone {
        font-size: 12px;
        color: #999;
        margin-left: 10px;
    }

    .title_item_tag {
        display: flex;
        align-items: center;

        span {
            margin-left: 10px;
        }
    }
}

.determine_item {
    padding: 10px 30px;

    .determine_item_name {
        font-weight: 600;

    }

    .determine_item_num {}
}

.color {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
</style>